// Copyright (c) 2020 Wang Zemin Personal. All Right Reserved

import * as React from "react";
import {Button, Card, Col, DatePicker, Form, Input, Row, Table} from "antd";
import {
    FormOutlined,
    ReloadOutlined,
    SearchOutlined,
    SecurityScanOutlined,
    UserAddOutlined,
    UserOutlined
} from "@ant-design/icons";
import {fetchAllBudget} from "../../requests/BudgetManageRequest";
import CreateBudgetModal from "../modals/CreateBudgetModal";
import UpdateBudgetModal from "../modals/UpdateBudgetModal";

export default class BudgetManagePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            selectedRowKey: "",
            selectedBudget: null,
            pagination: {current: 1, pageSize: 10},
            searchFromRef: React.createRef(),
            isOwn: false,
            filters: {}
        };
    }

    componentDidMount = () => {
        this.refreshBudgetData()
    }


    onTableChange = (pagination) => {
        this.setState({pagination: pagination}, () => this.refreshBudgetData(this.state.filters));
    }

    refreshBudgetData = (filters = {}) => {
        console.log("List all budget ")
        fetchAllBudget(this.state.pagination, filters)
            .then((budgetDomains) => {
                let budgets = budgetDomains.result.map((roleDomain) => this.toBudgetTableElement(roleDomain))
                this.setState({
                    data: budgets, pagination: {
                        current: budgetDomains.pageNo,
                        pageSize: budgetDomains.pageSize,
                        total: budgetDomains.total
                    }
                })
            })
    }

    searchKeys = (filters) => {
        console.log("Begin to refresh budget data with filter:" + JSON.stringify(filters))
        this.setState({
            filters: filters,
            pagination: {current: 1, pageSize: 10}
        },()=>this.refreshBudgetData(filters))

    }

    resetSearchKeys = () => {
        this.state.searchFromRef.current.resetFields();
    };


    toBudgetTableElement = (userDomain) => {
        return {
            "uuid": userDomain.uuid,
            "userName": userDomain.userName,
            "createTime": userDomain.createTime,
            "createBy": userDomain.createBy,
            "totalAmount": userDomain.totalAmount,
            "usedAmount": userDomain.usedAmount,
            "remark": userDomain.remark
        }
    }


    createData = () => {
        this.state.createModal.showModal()
    }

    updateData = () => {
        this.state.updateModal.showModal()
    }

    disableData = () => {
        this.state.disableModal.showModal()
    }

    render = () => {
        let pagination = this.state.pagination

        const budgetColumns = [
            {
                title: '用户账户',
                dataIndex: 'userName',
                key: 'userName',
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
            },
            {
                title: '创建人',
                dataIndex: 'createBy',
                key: 'createBy',
            },
            {
                title: '总可用金额',
                dataIndex: 'totalAmount',
                key: 'totalAmount',
            },
            {
                title: '已用金额',
                dataIndex: 'usedAmount',
                key: 'usedAmount',
            },
            {
                title: '备注信息',
                dataIndex: 'remark',
                key: 'remark',
            },
        ]

        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`Current selected keys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                this.setState({
                    selectedRowKey: selectedRows[0].userName
                })
            }
        };


        return (
            <div style={{padding: 10, margin: 10}}>
                <Card title="预算搜索条件">
                    <Form name="basic" ref={this.state.searchFromRef} layout="inline" onFinish={this.searchKeys}
                          style={{marginTop: 10, marginBottom: 10, width: '100%', border: "1", borderColor: "#000000"}}>

                        <Row style={{width: '100%'}}>
                            <Col span={8} offset={1}>
                                <Form.Item name="userName">
                                    <Input prefix={<SecurityScanOutlined/>} placeholder="用户账户"
                                           style={{width: '98%'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={3} offset={1}>
                                <Form.Item name="createBy" style={{width: '95%'}}>
                                    <Input prefix={<UserOutlined/>} placeholder="预算创建者"/>
                                </Form.Item>
                            </Col>
                            <Col span={6} offset={1}>
                                <Form.Item name="createTimeRange" style={{width: '95%'}}>
                                    <DatePicker.RangePicker placeholder={["创建时间", "创建时间"]}/>
                                </Form.Item>
                            </Col>

                        </Row>
                        <Row style={{width: '100%'}}>
                            <Col span={3} offset={1}>
                                <Form.Item name="remark" style={{width: '95%', marginTop: 20}}>
                                    <Input prefix={<UserOutlined/>} placeholder="备注信息"/>
                                </Form.Item>
                            </Col>

                            <Col span={2} offset={1}>
                                <Form.Item style={{marginTop: 20}}>
                                    <Button type="primary" icon={<SearchOutlined/>} htmlType="submit"
                                            style={{backgroundColor: "#13ce66"}}>搜索</Button>
                                </Form.Item>
                            </Col>
                            <Col span={2}>
                                <Form.Item style={{marginTop: 20}}>
                                    <Button type="primary" icon={<ReloadOutlined/>} onClick={this.resetSearchKeys}
                                            style={{backgroundColor: "#ffba00"}}>重置</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>

                </Card>

                <Card title="用户列表" style={{marginTop: 30, marginBottom: 10}}>
                    <Row style={{marginBottom: 10}}>
                        <Col span={4} offset={1}>
                            <Button type="primary" icon={<UserAddOutlined/>}
                                    style={{backgroundColor: "#13ce66"}} onClick={this.createData}>新增</Button>
                        </Col>
                        <Col span={4}>
                            <Button type="primary" icon={<FormOutlined/>}
                                    style={{backgroundColor: "#1890ff"}} disabled={this.state.selectedRowKey === ""}
                                    onClick={this.updateData}>修改</Button>
                        </Col>
                        {/*<Col span={4}>*/}
                        {/*    <Button type="primary" icon={<DeleteOutlined/>}*/}
                        {/*            style={{backgroundColor: "#ffa4a4"}} disabled={this.state.selectedRowKey === ""}*/}
                        {/*            onClick={this.disableData}>禁用</Button>*/}
                        {/*</Col>*/}
                    </Row>
                    <Table
                        rowSelection={{
                            type: "radio",
                            ...rowSelection
                        }}
                        columns={budgetColumns}
                        dataSource={this.state.data}
                        rowKey={(record) => record.uuid}
                        onChange={this.onTableChange}
                        pagination={pagination}
                        size="small"
                    />

                </Card>


                <CreateBudgetModal onRef={(ref) => {
                    this.setState({createModal: ref})
                }}/>

                <UpdateBudgetModal onRef={(ref) => {
                    this.setState({updateModal: ref})
                }} userName={this.state.selectedRowKey}/>

                {/*<DisableUserModal onRef={(ref) => {*/}
                {/*    this.setState({disableModal: ref})*/}
                {/*}} userName={this.state.selectedRowKey}/>*/}
            </div>
        );
    }

}

